import { Avatar, Button, Comment, Form, Input, List,Tooltip } from 'antd';
import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
import moment from 'moment';
import {Wrapper} from './style'
import React, { useState,createElement } from 'react';

const { TextArea } = Input;
const CommentList = ({ comments }) => (
  <List
    dataSource={comments}
    header={`${comments.length} ${comments.length > 1 ? '评论' : '评论'}`}
    itemLayout="horizontal"
    renderItem={(props) => <Comment {...props} />}
  />
);

const Editor = ({ onChange, onSubmit, submitting, value }) => (
  <>
    <Form.Item>
      <TextArea row = {3} onChange={onChange} value={value} />
    </Form.Item>
    <Form.Item>
      <Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
        发布
      </Button>
    </Form.Item>
  </>
);

const CommentA = () => {
  const [comments, setComments] = useState([]);
  const [submitting, setSubmitting] = useState(false);
  const [value, setValue] = useState('');
  const [likes, setLikes] = useState(0);
const [dislikes, setDislikes] = useState(0);
const [action, setAction] = useState(null);

const like = (e) => {
  e.preventDefault();
  e.stopPropagation();
  setLikes(1);
  setDislikes(0);
  setAction('liked');
};

const dislike = (e) => {
  e.preventDefault();
  e.stopPropagation();
  setLikes(0);
  setDislikes(1);
  setAction('disliked');
};
const actions = [
  <Tooltip key="comment-basic-like" title="Like">
    <span onClick={(e)=>like(e)}>
      {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
      <span className="comment-action">{likes}</span>
    </span>
  </Tooltip>,
  <Tooltip key="comment-basic-dislike" title="Dislike">
    <span onClick={(e)=>dislike(e)}>
      {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
      <span className="comment-action">{dislikes}</span>
    </span>
  </Tooltip>,
  <span key="comment-basic-reply-to">回复</span>,
];

  const handleSubmit = () => {
    if (!value) return;
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setValue('');
      setComments([
        ...comments,
        {
          author: '橘甜奶猫',
          actions:[...actions],
          avatar:'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e225a322a9664d97af3f9a5dc7161f2a~tplv-k3u1fbpfcp-watermark.image?',
          content: <p>{value}</p>,
          datetime: moment().fromNow(),
        },
      ]);
    }, 1000);
  };

  const handleChange = (e) => {
    setValue(e.target.value);
  };
  return (
    <Wrapper>
      <h3>短评</h3>
      <Comment
        // actions={actions}
        author={<a>离文不闻</a>}
        avatar={<Avatar src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd6d83033a4444dbbc4cd549bba31213~tplv-k3u1fbpfcp-watermark.image?" alt="Han Solo" />}
        content={
          <p style={{'lineHeight':'1rem'}}>
         简单来说，「神探大战」有着很大的解读空间，但并不像「神探」那样需要观众去“解谜”。
         普通观众可以把「神探大战」当做最普通的爽片，影迷亦可以从中挖掘出许多的“细思极恐”。
          </p>
      }
      datetime={
        <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
          <span>{moment().fromNow()}</span>
        </Tooltip>
      }
    />
      {comments.length > 0 && <CommentList comments={comments} />}
      <Comment
        actions={actions}
        avatar={<Avatar src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e225a322a9664d97af3f9a5dc7161f2a~tplv-k3u1fbpfcp-watermark.image?" alt="橘甜奶猫" />}
        content={
          <Editor
            onChange={handleChange}
            onSubmit={handleSubmit}
            submitting={submitting}
            value={value}
          >
            
          </Editor>

        }
      />
    </Wrapper>
  );
};

export default CommentA;